<template>
	<div class="parts-define-root">
        <div class="parts-define-left-right-content-lay">
            <div class="parts-define-left-content-lay">
                <div class="parts-define-left-table-lay">
                    <PartsDefineTable :PltCode="this.PltCode" :dmgCode="this.dmgCode" :tableData="this.partsDefineTableData" ref="PartsDefineTable" class="table-view" @onPartsSelect="onPartsSelect"/>
                </div>
                <div class="parts-define-left-content-lay-footer">
                    {{ $t('message.PartsDefine.count') }} {{ this.partsDefineTableCount }} {{ $t('message.PartsDefine.countUnit') }}
                </div>
            </div>
            <div class="parts-define-right-content-lay">
                <div class="parts-define-right-table-lay">
                    <PartsDefineEdit :dmgCode="this.dmgCode" :targetParts="this.selectedPartsDefine" @setDefine="setDefine" @releaseDefine="releaseDefine" ref="PartsDefineEdit" class="table-view" @onUserSelect="onUserSelect"/>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="footer">
                <el-button @click="CancelFn">{{ $t('message.PartsDefine.cancel') }}</el-button>
                <el-button type="primary" class="okBTn" @click="isClickSaveBtn = true, saveFn()">{{ $t('message.PartsDefine.save') }}</el-button>
            </div>
        </div>
	</div>

</template>

<script>
import _ from 'lodash-es';
import { GetPartsList, GetPartsDefineSaveMessage, SavePartsDefineList } from "@/api/api";
import PartsDefineTable from "@/components/Customize/Customer127/PartsDefine/views/PartsDefineTable";
import PartsDefineEdit from "@/components/Customize/Customer127/PartsDefine/views/PartsDefineEdit";
import eventBus from "@/eventBus/bus";
export default {
    props: ["PltCode", "dmgCode"],
	components: {
        PartsDefineTable,
        PartsDefineEdit,

    },
	// ["userInfo"],
	// dataプロパティ：変更が検知されるような値
	data() {
		return {
            partsDefineTableCount: 0,
            partsDefineTableData: [],
            selectedPartsDefine: null,
            isChangePartsDefine: false
		}
	},
    created() {
        this.getPartsList();
	},
    mounted() {
        eventBus.$on("EventBusPartsDefineSaveFn", () => {
            this.saveFn();
        })
        this.getPartsList();
    },
    beforeDestroy() {
        eventBus.$off("EventBusPartsDefineSaveFn")
    },
	watch: {
		async dmgCode(val) {
            this.setIsChangePartsDefine(false);
            this.selectedPartsDefine = null;
            this.getPartsList();
		}
	},
    methods: {
        onPartsSelect(e) {
            this.selectedPartsDefine = e;
        },
        setCount(val) {
            this.partsDefineTableCount = val;
        },
		getPartsList() {
			this.partsDefineTableData = [];
            if (this.dmgCode !== null) {
                let Dto = {
                    dmgCode: this.dmgCode,
                }
                GetPartsList(Dto).then((res) => {
                    if (res.data.code === 0) {
                        this.partsDefineTableData = res.data.data;
                        this.setCount(this.partsDefineTableData.length);
                    } else {
                        this.setCount(0);
                    }
                });
            }
		},
        setDefine(partsCode) {
            this.setIsChangePartsDefine(true);
            this.partsDefineTableData = this.partsDefineTableData.map((item) => item.partsCode === partsCode ? { ...item, count: item.count + 1 } : item);
            this.setCount(this.partsDefineTableData.length);
        },
        releaseDefine(partsCode) {
            this.setIsChangePartsDefine(true);
            this.partsDefineTableData = this.partsDefineTableData.map((item) => item.partsCode === partsCode ? { ...item, count: item.count - 1 } : item);
            this.setCount(this.partsDefineTableData.length);
        },
        async saveFn() {
            if (this.isChangePartsDefine) {
                let message = await this.getSaveMessage();
                this.$confirm(message, '', {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(async () => {
                    this.setIsChangePartsDefine(false);
                    let partsDefineList = this.$refs.PartsDefineEdit.getSaveData();
                    let dto = {
                        dmgCode: this.dmgCode,
                        data: partsDefineList
                    }
                    let res = await SavePartsDefineList(dto);
                    if (res.data.code === 0) {
						this.$message({
							type: 'success',
							message: res.data.msg
						});
                    }
                    if (this.$store.state.isCurrentFn) {
                        this.$store.state.isCurrentFn();
                        this.$store.commit("reSetIsCurrent");
                    }
                }).catch(async () => {
                    if (this.$store.state.isCurrentFn) {
                        this.$store.state.isCurrentFn();
                        this.$store.commit("reSetIsCurrent");
                    }
                });
            }
        },
        setIsChangePartsDefine(val) {
            this.isChangePartsDefine = val;
            this.$store.commit("changeIsCurrentNext", !this.isChangePartsDefine);
        },
        async getSaveMessage() {
            let res = await GetPartsDefineSaveMessage();
            return res.data.msg;
        },
        async CancelFn() {
            this.selectedPartsDefine = null;
			this.getPartsList();
            this.$refs.PartsDefineEdit.cancelFn();
        }
    }
};
</script>

<style lang="scss" scoped>
.parts-define-root {
	width: 100%;
	height: calc(100% - 48px);// 48px = EvaluationViewのtitle-viewの高さ
}
.parts-define-left-right-content-lay {
    width: 100%;
    height: 95%;
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    gap: 15px;
}
.parts-define-left-content-lay {
    position: relative;
    width: 30%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .parts-define-left-table-lay {
        width: 100%;
        // height: 90%;
        flex-grow: 1;
        flex-shrink: 1;
        border: 1px solid #d3d3d3;

        .table-view {
            width: 100%;
            height: 100%;
        }
    }
    .parts-define-left-content-lay-footer {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    bottom: 10px;
    left: 10px;
}
}
.parts-define-right-content-lay {
    width: 70%;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    .parts-define-right-table-lay {
        width: 100%;
        // height: 90%;
        flex-grow: 1;
        flex-shrink: 1;
        border: 1px solid #d3d3d3;
        flex-direction: column;

        .table-view {
            width: 100%;
            height: 100%;
        }
    }
}
.container {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 5%;
    // margin-top: 4px;
}
.footer {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    bottom: 10.5px;
    left: 0;
    transform: translateY(3px);

    button {
        width: 123px;
        padding: 0 15px;
        height: 32px;
        // background: #ffffff;
        // border: 1px solid #d9d9d9;
        text-align: center;
        line-height: 32px;
        margin-right: 16px;
        border-radius: 0;
    }
}
</style>